<template>
  <div class="home-container">
    <div class="top-box">
      <div class="img-logo">
        <a href="#">
          <img src="../assets/index.png" />
        </a>
      </div>
      <ul class="top-mid-box" v-if="show">
        <li class="top-mid-font">
          <a href="#" @click.prevent="login"
            >登录
            <i class="iconfont">&#xe611;</i>
          </a>
        </li>
        <li class="top-mid-font">
          <a href="#" @click.prevent="register"
            >注册
            <i class="iconfont2">&#xe8ca;</i>
          </a>
        </li>
      </ul>
      <ul class="top-mid-box" v-else>
        <li class="top-mid-font">
          <a href="javascript:;">{{ username }} </a>
        </li>
        <li class="top-mid-font">
          <a href="#" @click="signout">退出登录 </a>
        </li>
      </ul>
    </div>

    <div class="secondbox">
      <div class="secondbox-color">
        <div class="secondbox-font">
          <h2>第二届"讯飞杯"打字比赛🎉</h2>
          <ul class="secondbox-font1">
            <!-- <li class="breadcrumb">
            <a href="#">Home</a>
          </li>
          <li class="breadcrumb">-ABOUT US</li> -->
          </ul>
        </div>
      </div>
    </div>

    <div class="fourthbox">
      <div class="fourthbox-box">
        <div class="fourtbox-font">
          <h2>讯飞杯“第二届打字比赛评审规则及评分规则</h2>
          <p>
            <span class="fourtbox-font-color"
              >一、比赛规则：<br />
              （1）比赛时长为10分钟；参赛选手须在比赛前10分钟进入比赛场地，检查计算机是否正常；比赛开始前5分钟，参赛人员停止入场；迟到5分钟不得参加比赛，作弃权处理。<br />
              （2）参赛选手须按工作人员指定位置就坐。<br />
              （3）各比赛选手就座后，按要求进入打字比赛系统，请工作人员确认，选手进入系统进行测试。<br />
              （4）参赛人员严禁携带任何资料入场。比赛时应严格遵守赛场纪律，关闭通讯工具，不得交头接耳，不得携带各类储存工具（如U盘、硬盘等），未在主持人宣布开始时严禁开始打字，否则视为犯规并取消比赛资格。<br />
              （5）参赛人员如对赛题有疑问，可在比赛开始前向工作人员询问，如需调试计算机，请举手示意。比赛过程中，选手不允许讲话、走动，须接受工作人员的监督和指示。<br />
              （6）因选手原因造成设备故障或损坏而无法继续比赛的，终止比赛；非选手个人原因造成设备故障，是具体情况裁决。<br />
              （7）比赛时间到，选手请停止比赛，双手放在桌上，主持人宣布退场时方可离开赛场。如提前关闭系统或离开，打字成绩作零分处理。<br />
            </span>
          </p>
          <p>
            <span class="fourtbox-font-color">
              二、比赛事项：<br />
              （1）大赛使用打字游戏系统，打字方式为英文输入法。<br />
              （2）参赛选手使用统一系统进行比赛，根据系统结束页面确定成绩。<br />
            </span>
          </p>
          <p>
            <span class="fourtbox-font-color"
              >三、裁判与监督安排：为了本次活动的公平公正，比赛将邀请学校相关领导对比赛进行全程监督。</span
            >
          </p>

          <div class="fourtbox-font-bottum">
            <div v-if="show">
              <a href="#" class="hvr-rectangle-in" @click.prevent="login"
                >登 录</a
              >
            </div>

            <div v-else>
              <a href="#" class="hvr-rectangle-in" @click.prevent="play"
                >开始游戏</a
              >
              <a href="#" class="hvr-rectangle-in" @click.prevent="rank"
                >查看排名</a
              >
            </div>
          </div>
        </div>
        <div class="fourtbox-img">
          <img src="../assets/hx.jpg" alt="" id="logopx" />
        </div>
      </div>
    </div>

    <div class="thirdbox">
      <div class="thirdbox-color">
        <!-- <div class="third-smallbox">
          <div class="thirdbox-fourbox">
            <i class="iconfont3">&#xe670;</i>
            <span class="thirdbox-fourbox-font">25+</span>
            <h4>GLOBALIZATION WORK</h4>
          </div>
          <div class="thirdbox-fourbox">
            <i class="iconfont3">&#xe61d;</i>
            <span class="thirdbox-fourbox-font">750+</span>
            <h4>HAPPY DONATORS</h4>
          </div>
          <div class="thirdbox-fourbox">
            <i class="iconfont3">&#xe6fb;</i>
            <span class="thirdbox-fourbox-font">250+</span>
            <h4>SUCCESS MISSION</h4>
          </div>
          <div class="thirdbox-fourbox">
            <i class="iconfont3">&#xe8f3;</i>
            <span class="thirdbox-fourbox-font">1000+</span>
            <h4>VOLUNTEER REACHED</h4>
          </div>
        </div> -->
      </div>
    </div>

    <div class="fifthbox">
      <div class="fifthbox-smallbox">
        <div class="fifthbox-second-smallbox">
          <div class="fifthbox-second-font">
            <br />
            <p>
              <i class="iconfont1">&#xe642;</i>
            </p>
            <br />
            <h2>开发者团队</h2>
          </div>
        </div>
        <div class="fifthbox-third-smallbox">
          <div class="fifthbox-third-flex">
            <div class="fifthbox-fourbox">
              <div class="fifthbox-fourbox-img">
                <img src="../assets/producer photos/qyc.jpg" alt="" />
              </div>
              <div class="fifthbox-fourbox-font">
                <h4>
                  <a href="#">覃宇琛</a>
                </h4>
                <p>微信小程序开发成员</p>
              </div>
            </div>
            <div class="fifthbox-fourbox">
              <div class="fifthbox-fourbox-img">
                <img src="../assets/producer photos/zlw.jpg" alt="" />
              </div>
              <div class="fifthbox-fourbox-font">
                <h4>
                  <a href="#">只路炜</a>
                </h4>
                <p>前端开发成员</p>
              </div>
            </div>
            <div class="fifthbox-fourbox">
              <div class="fifthbox-fourbox-img">
                <img src="../assets/producer photos/jgy.jpg" alt="" />
              </div>
              <div class="fifthbox-fourbox-font">
                <h4>
                  <a href="#">敬国颖</a>
                </h4>
                <p>前端开发成员</p>
              </div>
            </div>
            <div class="fifthbox-fourbox">
              <div class="fifthbox-fourbox-img">
                <img src="../assets/producer photos/lkq.jpg" alt="" />
              </div>
              <div class="fifthbox-fourbox-font">
                <h4>
                  <a href="#">刘科强</a>
                </h4>
                <p>前端开发成员</p>
              </div>
            </div>
            <div class="fifthbox-fourbox">
              <div class="fifthbox-fourbox-img">
                <img src="../assets/producer photos/wtx.jpg" alt="" />
              </div>
              <div class="fifthbox-fourbox-font">
                <h4>
                  <a href="#">伍桐鑫</a>
                </h4>
                <p>爬虫技术成员</p>
              </div>
            </div>
            <div class="fifthbox-fourbox">
              <div class="fifthbox-fourbox-img">
                <img src="../assets/producer photos/ggp.jpg" alt="" />
              </div>
              <div class="fifthbox-fourbox-font">
                <h4>
                  <a href="#">郭桂平</a>
                </h4>
                <p>后端开发成员</p>
              </div>
            </div>
            <div class="fifthbox-fourbox">
              <div class="fifthbox-fourbox-img">
                <img src="../assets/producer photos/cwt.jpg" alt="" />
              </div>
              <div class="fifthbox-fourbox-font">
                <h4>
                  <a href="#">陈文涛</a>
                </h4>
                <p>爬虫技术成员</p>
              </div>
            </div>
            <div class="fifthbox-bigbox">
              <div class="fifthbox-fourbox-img">
                <img src="../assets/producer photos/zjf.jpg" alt="" />
              </div>
              <div class="fifthbox-fourbox-font">
                <h4>
                  <a href="#">周建飞</a>
                </h4>
                <p>技术辅导老师</p>
              </div>
            </div>
            <div class="fifthbox-bigbox">
              <div class="fifthbox-fourbox-img">
                <img src="../assets/producer photos/lj.jpg" alt="" />
              </div>
              <div class="fifthbox-fourbox-font">
                <h4>
                  <a href="#">刘俊</a>
                </h4>
                <p>技术辅导老师</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="sixthbox">
      <div class="sixthbox-box-color">
        <div class="sixth-smallbox">
          <div class="sixth-smallbox-font">
            <i class="iconfont4">&#xee49;</i>
            <p>
              运营部人员：
              <span> 刘波 </span>
              <span> 赵金玉笛 </span>
              <span> 周杰 </span>
              <span> 吕汉佳 </span>
            </p>
            <br />
            <p>运营部辅导老师：唐莹璐</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      show: true,
      username: localStorage.getItem('username')
    }
  },
  created() {
    if (this.username === null) {
      this.show = true
    } else {
      this.show = false
    }
  },
  methods: {
    signout() {
      localStorage.removeItem('tag')
      this.username = localStorage.removeItem('username')
      this.show = true
    },
    login() {
      this.$router.replace('/login')
    },
    play() {
      this.$router.replace('/typing-game')
    },
    register() {
      this.$router.replace('/register')
    },
    rank() {
      this.$router.replace('/rank')
    }
  },
  components: {}
}
</script>
<style lang="less" scoped>
html {
  font-family: 'Orbitron', sans-serif;
}
* {
  margin: 0;
  padding: 0;
}

/* @media screen and (max-width: 991px) {
  .top-box {
    width: 1280px;
  }
} */

/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont'; /* Project id 3770358 */
  src: url('//at.alicdn.com/t/c/font_3770358_t5z0h79mvvm.woff2?t=1669885043874')
      format('woff2'),
    url('//at.alicdn.com/t/c/font_3770358_t5z0h79mvvm.woff?t=1669885043874')
      format('woff'),
    url('//at.alicdn.com/t/c/font_3770358_t5z0h79mvvm.ttf?t=1669885043874')
      format('truetype');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.iconfont1 {
  font-family: 'iconfont' !important;
  font-size: 50px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.iconfont2 {
  font-family: 'iconfont' !important;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

h2 {
  font-size: 36px;
  color: #070707;
  font-weight: 600;
  margin-bottom: 5px;
}

a {
  text-decoration: none;
}

h4 {
  font-size: 20px;
}

ul {
  list-style: none;
}

.top-box {
  display: flex;
  height: 75px;
  width: 100%;
  position: fixed;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 5px 5px #032b73;
  background-color: white;
  z-index: 2;
}

.img-logo {
  margin-right: 800px;
}

.top-mid-box {
  display: flex;
  flex-wrap: nowrap;
  margin-left: 10%;
  list-style-type: none;
}

.top-mid-font {
  margin-left: 20px;
}

.top-mid-font a {
  text-decoration: none;
  color: black;
  font-weight: 700;
  transition: 0.5s;
}

.top-mid-font a:hover {
  color: #032b73;
}

.top-mid-font:hover .top-mid-content {
  display: block;
}

.top-mid-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 180px;
}

.top-mid-content a {
  color: white;
}

.top-mid-content a:hover {
  color: black;
}

.top-mid-content-font {
  display: block;
  padding: 10px 20px;
}

.top-mid-content-font:hover {
  background-color: white;
}

.top-right {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  float: right;
  margin-left: 20px;
}

.top-right a {
  text-decoration: none;
  color: #000;
}

.top-right-font {
  border-radius: 100%;
  border: 2px solid black;
  float: right;
  margin-left: 20px;
  padding: 5px 5px;
}

.secondbox {
  background-color: #032b73;
  background-size: cover;
  position: relative;
  top: 80px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 124px 0 104px 0;
}
.secondbox-color {
  background-color: #032b73;
  opacity: 0.8;
  height: 100%;
}

.secondbox-font h2 {
  color: white;
  font-size: 40px;
  text-shadow: 10px 2px 8px black;
}

.secondbox-font1 {
  list-style-type: none;
  display: flex;
  flex-wrap: nowrap;
}

.secondbox-font1 a {
  text-decoration: none;
  color: white;
}

.secondbox-font1 a:hover {
  color: black;
}
#logopx {
  margin-top: 80px;
  width: 407px;
  height: 407px;
}

.breadcrumb {
  color: white;
  margin-left: 8px;
}

.fourthbox {
  max-width: 1500px;
  margin: auto;
  margin-top: 200px;
}

.fourthbox-box {
  display: flex;
  width: 100%;
}

.fourtbox-font {
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  float: left;
  margin-left: 5%;
}

.fourtbox-font-color {
  display: block;
  margin-top: 5px;
  margin-bottom: 20px;
  color: black;
  font-weight: 400;
  font-size: 20px;
}

.fourtbox-img {
  width: 30%;
  margin-left: 5%;
  float: right;
}

.fourtbox-font p,
p {
  font-size: 20px;
  font-weight: 300;
}

.fourtbox-font-bottum {
  margin-top: 50px;
}

.hvr-rectangle-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: #032b73;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding: 20px;
  font-size: 20px;
  margin-right: 40px;
  color: #032b73;
  border: 2px solid #032b73;
  opacity: 0.8;
  width: 150px;
  text-align: center;
}

.hvr-rectangle-in:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-rectangle-in:hover,
.hvr-rectangle-in:focus,
.hvr-rectangle-in:active {
  color: white;
}

.hvr-rectangle-in:hover:before,
.hvr-rectangle-in:focus:before,
.hvr-rectangle-in:active:before {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.hvr-rectangle-in a {
  color: #53a92c;
}

.hvr-rectangle-in a:hover {
  color: white;
}

.thirdbox {
  background-image: url(../assets/xhfj.png);
  position: relative;
  top: 100px;
  background-size: cover;
  max-width: 100%;
  background-attachment: fixed;
  background-position: center center;
  height: 400px;
}

.thirdbox-color {
  background-color: #032b73;
  opacity: 0.8;
  height: 100%;
}

.third-smallbox {
  margin: auto;
  max-width: 1300px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 0 100px 0;
}

.thirdbox-fourbox {
  width: 25%;
  color: #fff;
  height: 80%;
  margin-left: 30px;
  margin-right: 40px;
  text-align: center;
}

.thirdbox-fourbox-font {
  display: block;
  font-size: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 600;
}

.fifthbox {
  margin-top: 200px;
}

.fifthbox-smallbox {
  height: 100%;
  max-width: 1300px;
  margin: auto;
}

.fifthbox-second-smallbox {
  height: 30%;
  width: 750px;
  margin: auto;
  background-color: white;
  display: flex;
  align-items: center;
  text-align: center;
}

.fifthbox-second-smallbox p {
  font-size: 16px;
  font-weight: 400px;
  line-height: 20px;
}

.fifthbox-second-font {
  margin: auto;
}

.fifthbox-third-smallbox {
  height: 60%;
  width: 100%;
}

.fifthbox-third-flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}

.fifthbox-fourbox {
  height: 370px;
  width: 248px;
  margin-left: 25px;
  margin-right: 25px;
  border: 1px solid #f0f0f0;
}
.fifthbox-bigbox {
  height: 370px;
  width: 320px;
  margin-left: 50px;
  margin-right: 50px;
  border: 1px solid #f0f0f0;
}

.fifthbox-fourbox-img {
  height: 200px;
  width: 200px;
  overflow: hidden;
  border-radius: 100%;
  background-color: white;
  margin: auto;
  margin-top: 20px;
  transition: width 1s, height 1s;
  background-size: 100% 100%;
}

.fifthbox-fourbox-img img {
  width: 100%;
  height: 120%;
}

.fifthbox-fourbox:hover .fifthbox-fourbox-img {
  height: 230px;
  width: 230px;
}

.fifthbox-bigbox:hover .fifthbox-fourbox-img {
  height: 230px;
  width: 230px;
}

.fifthbox-fourbox-font a {
  color: black;
  font-size: 25px;
}

.fifthbox-fourbox:hover a {
  color: #032b73;
}

.fifthbox-bigbox:hover a {
  color: #032b73;
}

.fifthbox-fourbox-font {
  padding: 30px 0 10px 0;
  text-align: center;
}

.fifthbox-fourbox-font p {
  font-size: 17px;
  font-weight: 600;
}

.sixthbox {
  background-image: url(../assets/office1.0bd5f2d.png);
  background-size: cover;
  max-width: 100%;
  background-attachment: fixed;
  background-position: center center;
  height: 400px;
  margin-top: 250px;
}

.sixthbox-box-color {
  background-color: #032b73;
  opacity: 0.9;
  height: 100%;
}

.sixth-smallbox {
  margin: auto;
  max-width: 1300px;
  padding: 100px 0 100px 0;
}

.sixth-smallbox-font {
  margin: auto;
  width: 750px;
  text-align: center;
  padding: 0 67px;
  overflow: hidden;
}

.sixth-smallbox p:first-of-type {
  padding-top: 30px;
  margin: auto;
  color: white;
  font-weight: 400;
}

.sixth-smallbox p:last-of-type {
  padding-top: 10px;
  color: white;
  font-weight: 400;
}

.sixth-smallbox a {
  padding-top: 30px;
  margin: auto;
  color: white;
  font-weight: 700;
  font-style: italic;
  transition: 0.5s;
}

.sixth-smallbox a:hover {
  color: black;
}

@media screen and (max-width: 1024px) {
  .top-box,
  .secondbox,
  .fourthbox,
  .thirdbox,
  .fifthbox,
  .sixthbox {
    width: 1024px;
  }
  .fourtbox-img {
    display: none;
  }
  .fourtbox-font {
    width: 100%;
  }
}
</style>
